import { Handle, Position } from "@xyflow/react";
import { motion } from "framer-motion";
import { Bot } from "lucide-react";

export const AgentNode = ({
  data,
}: {
  data: { rlName: string; cvModels: string[]; chosenModel: string };
}) => (
  <div className="w-[200px] p-3 rounded-md border border-border bg-background shadow-sm">
    <Handle type="target" position={Position.Top} className="!bg-primary" />
    <div className="flex items-center space-x-2 mb-2">
      <Bot className="h-5 w-5 text-primary flex-shrink-0" />
      <span
        className="text-sm font-semibold text-foreground truncate"
        title={data.rlName}
      >
        {data.rlName}
      </span>
    </div>
    <div>
      <h4 className="mb-1.5 text-xs font-medium text-muted-foreground">
        Selected CV Model:
      </h4>
      <div className="flex flex-wrap gap-1.5">
        {data.cvModels.map((model) => (
          <motion.div
            key={`${data.rlName}-${model}`}
            initial={{ opacity: 0 }}
            animate={{
              opacity: 1,
              transition: { duration: 0.2 },
            }}
            exit={{ opacity: 0 }}
            className={`
              px-2 py-0.5 text-xs font-medium rounded transition-all duration-150 ease-in-out
              ${
                data.chosenModel === model
                  ? "bg-primary text-primary-foreground shadow-sm ring-1 ring-primary ring-offset-1 ring-offset-background"
                  : "bg-secondary text-secondary-foreground hover:bg-secondary/90"
              }
            `}
          >
            {model}
          </motion.div>
        ))}
      </div>
    </div>
    <Handle type="source" position={Position.Bottom} className="!bg-primary" />
  </div>
);
